<template>
  <div v-show="is_show_Ac" class="account">
    <div class="accountMainBg">
      <img @click="closeAcPop(false)" src="@/assets/img/account/close_w.png" >
      <div class="accountMain">
        <div class="Le">
          <img src="@/assets/img/account/LeBg.png" >
        </div>
        <div class="Ri">

          <div v-show="isShowLogin" class="logoBox">
           <!-- <div v-show="!isQrLogin" @click="QrLoginFn" class="qrtu">
              <img v-if="!isQrLogin" src="@/assets/img/account/login1.png" >
              <img v-else src="@/assets/img/account/login2.png" >
            </div>
 -->
            <div v-show="isQrLogin" class="QrLoginBg">
              <h3>
                扫码登录
              </h3>
              <div :style="{'background':'url('+require('@/assets/img/account/qrCodeBg.png')+') no-repeat','backgroundSize':'100% 100%'}" class="QrCodeBg">
                <div v-show="is_overdue" class="overdueBg">
                  <h3>
                    二维码已过期
                  </h3>
                  <div @click="gzhScCodeFn" class="tu">
                    <span>点击重新获取</span>
                    <img src="@/assets/img/account/refresh.svg" >
                  </div>
                </div>
                <div class="QRCodeDiv" ref="qrCodeDiv"></div>
              </div>
              <h6>
                请使用微信扫一扫登录
              </h6>

              <dl class="tzLoginBox">
                <dt>
                  <h3>
                    使用其他登录方式
                  </h3>
                </dt>
                <dd>
                  <!-- <div>
                     QQ登录
                  </div> -->
                  <div class="qqLogin">
                    <a :href="qqOpenLoginLink" target="_blank">
                      <img src="@/assets/img/account/qqLogin.png" alt="">
                    </a>
                  </div>
                  <div>
                    <a :href="wxOpenLoginLink" target="_blank">
                      微信登录
                    </a>
                  </div>
                </dd>
              </dl>
            </div>

            <div class="LoginBg">
              <div class="LoginBoxBg">
                <div class="titleBtn">
                  <span @click="titleBtnFn(true)" :class="{'ac_titleBtn':isAcLogin}">
                    手机号登录
                  </span>
                  <span @click="titleBtnFn(false)" :class="{'ac_titleBtn':!isAcLogin}">
                    邮箱登录
                  </span>
                </div>
                <ul class="acUl">

                	<li v-show="isAcLogin">
                    <div class="inpWrap">
                      <div class="inpWrapBox">
                          <input v-model="mbNumber" class="wid_00" type="number" placeholder="请输入手机号">
                          <div class="btnClear">
                            <img @click="clearVal('mbNumber')" v-show="mbNumber.length!==0" src="@/assets/img/account/clearBtn.png" >
                          </div>
                      </div>
                    </div>
                  </li>
                	<li v-show="!isAcLogin">
                    <div class="inpWrap">
                      <div class="inpWrapBox">
                          <input v-model="eMailAddr" class="wid_00" type="text" placeholder="请输入邮箱地址">
                          <div class="btnClear">
                            <img @click="clearVal('eMailAddr')" v-show="eMailAddr.length!==0" src="@/assets/img/account/clearBtn.png" >
                          </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="inpWrap">
                      <div class="inpWrapBox">
                          <input v-model="lgPwd" v-show="isLoginPwd" class="wid_01" type="password" placeholder="请输入密码">
                          <input v-model="lgPwd" v-show="!isLoginPwd" class="wid_01" type="text" placeholder="请输入密码">
                          <div class="btnSee">
                            <img @click="seeLgPwd" src="@/assets/img/account/see.png" >
                          </div>
                      </div>

                      <div @click="showBoxFn(false,false,true)" class="textBtn">
                        忘记密码
                      </div>
                    </div>
                  </li>


                  <!-- <li v-show="!isAcLogin">
                    <div class="inpWrap">
                      <div class="inpWrapBox">
                          <input v-model="lgYzm" class="wid_02" type="text" placeholder="请输入验证码">
                          <div class="btnClear">
                            <img v-show="lgYzm.length!==0" @click="clearVal('lgYzm')" src="@/assets/img/account/clearBtn.png" >
                          </div>
                      </div>

                    <div @click="secBtn" class="textBtn_01">
                     <span v-show="is_secRev">
                         获取验证码
                       </span>
                       <span v-show="!is_secRev">
                         重新获取({{sec}}s)
                       </span>

                    </div>
                    </div>
                  </li> -->



                  <!-- <li>
                    <div class="xieyi">
                      <input type="checkbox" id="xieyi">
                      <label for="xieyi">
                        我已阅读并同意
                      </label>
                      <span>
                        《知识付费用户付费协议》
                      </span>
                    </div>
                  </li> -->
                  <li>
                    <button @click="mb_LoginFn" class="tjBtn_00">
                      登录
                    </button>
                  </li>
                  <li>
                    <dl class="btnDl">
                      <dt>
                        没有账号？
                      </dt>
                      <dd @click="showBoxFn(false,true,false)">
                        立即注册
                      </dd>
                    </dl>
                  </li>
                </ul>
              </div>
            </div>

          </div>
          <div v-show="isShowRegister" class="registerBox">

            <!-- <h1 class="loginTitle">
              注册账号
            </h1> -->

            <div class="titleBtn">
              <span @click="titleRegBtnFn(true)" :class="{'ac_titleBtn':isAcReg}">
                手机号注册
              </span>
              <span @click="titleRegBtnFn(false)" :class="{'ac_titleBtn':!isAcReg}">
                邮箱注册
              </span>
            </div>


            <ul class="acUl">
              	<li v-show="isAcReg">
                  <div class="inpWrap">
                    <div class="inpWrapBox">
                        <input v-model="regMbNumber" class="wid_00" type="text" placeholder="请输入手机号">
                        <div class="btnClear">
                          <img @click="clearVal('regMbNumber')" v-show="regMbNumber.length!==0" src="@/assets/img/account/clearBtn.png" >
                        </div>
                    </div>
                  </div>
                </li>

              	<li v-show="!isAcReg">
                  <div class="inpWrap">
                    <div class="inpWrapBox">
                        <input v-model="regEmNumber" class="wid_00" type="text" placeholder="请输入邮箱地址">
                        <div class="btnClear">
                          <img @click="clearVal('regEmNumber')" v-show="regEmNumber.length!==0" src="@/assets/img/account/clearBtn.png" >
                        </div>
                    </div>
                  </div>
                </li>

                <li>
                  <div class="inpWrap">
                    <div class="inpWrapBox">
                        <input v-model="regMbYzm" class="wid_02" type="text" placeholder="请输入验证码">
                        <div class="btnClear">
                          <img @click="clearVal('regMbYzm')" v-show="regMbYzm.length!==0" src="@/assets/img/account/clearBtn.png" >
                        </div>
                    </div>

                    <div @click="secBtn" class="textBtn_01">
                     <span v-show="is_secRev">
                         获取验证码
                       </span>
                       <span v-show="!is_secRev">
                         重新获取({{sec}}s)
                       </span>

                    </div>
                  </div>
                </li>

              	<li>
                  <div class="inpWrap">
                    <div class="inpWrapBox">
                        <input v-model="regPwd" v-show="isregPwd" class="wid_00" type="password" placeholder="请输入8-16位字母加数字组合密码">
                        <input v-model="regPwd" v-show="!isregPwd" class="wid_00" type="text" placeholder="请输入8-16位字母加数字组合密码">

                          <div class="btnSee">
                            <img @click="seeRegPwd" src="@/assets/img/account/see.png" >
                          </div>
                    </div>
                  </div>
                </li>


                <!-- <li>
                  <div class="xieyi">
                    <input type="checkbox" id="xieyi_zc">
                    <label for="xieyi_zc">
                      我已阅读并同意
                    </label>
                    <span>
                      《知识付费用户付费协议》
                    </span>
                  </div>
                </li> -->

                <li>
                  <dl class="verCodeDL">
                    <dt>
                      <input v-model="imgVerCode" type="text" placeholder="请输入验证码">
                    </dt>
                    <dd @click="getImgVerCodeFn" class="imgVerCodeBox">
                     <img :src="imgVerCode_img.image" >
                    </dd>
                  </dl>
                </li>

                <li>
                  <button @click="registerFn" class="tjBtn_00">
                    注册
                  </button>
                </li>
                <li>
                  <dl class="btnDl">
                    <dt>
                      已有账号？
                    </dt>
                    <dd @click="showBoxFn(true,false,false)">
                      立即登录
                    </dd>
                  </dl>
                </li>
              </ul>


          </div>
          <div v-show="isShowFindPwd" class="findPwdBox">
            <h1 class="loginTitle">
              找回密码
            </h1>

            <ul class="acUl">
              	<li>
                  <div class="inpWrap">
                    <div class="inpWrapBox">
                        <input v-model="findPwdMb" class="wid_00" type="text" placeholder="请输入手机号或者邮箱地址">
                        <div class="btnClear">
                          <img @click="clearVal('findPwdMb')" v-show="findPwdMb.length!==0" src="@/assets/img/account/clearBtn.png" >
                        </div>
                    </div>
                  </div>
                </li>

                <li>
                  <div class="inpWrap">
                    <div class="inpWrapBox">
                        <input v-model="findPwdYzm" class="wid_02" type="text" placeholder="请输入验证码">
                        <div class="btnClear">
                          <img @click="clearVal('findPwdYzm')" v-show="findPwdYzm.length!==0" src="@/assets/img/account/clearBtn.png" >
                        </div>
                    </div>

                    <div @click="secBtn" class="textBtn_01">
                      <span v-show="is_secRev">
                        获取验证码
                      </span>
                      <span v-show="!is_secRev">
                        重新获取({{sec}}s)
                      </span>
                    </div>
                  </div>
                </li>

              	<li>
                  <div class="inpWrap">
                    <div class="inpWrapBox">
                        <input v-show="is_findPwdStr" v-model="findPwdStr" class="wid_00" type="password" placeholder="请输入8-16位字母加数字组合密码">
                        <input v-show="!is_findPwdStr" v-model="findPwdStr" class="wid_00" type="text" placeholder="请输入8-16位字母加数字组合密码">
                          <div class="btnSee">
                            <img @click="seeFindPwd" src="@/assets/img/account/see.png" >
                          </div>
                    </div>
                  </div>
                </li>

                <li>
                  <button @click="findPwdBtnFn" class="tjBtn_00">
                    确认
                  </button>
                </li>
                <li>
                  <dl class="btnDl">
                    <dd @click="showBoxFn(true,false,false)">
                      立即登录
                    </dd>
                  </dl>
                </li>
              </ul>

          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import QRCode from 'qrcodejs2';
  import VerCode from "./verCode.vue";
  export default{
    name:"Account",
    data(){
      return{
        is_show_Ac:false,
        isShowLogin:true,
        isShowRegister:false,
        isShowFindPwd:false,
        isQrLogin:false,
        wxLgData:"微信扫码登录",
        isAcLogin:true,
        isAcReg:true,
        eMailAddr:"",
        mbNumber:"",
        lgYzm:"",
        isLoginPwd:true,
        lgPwd:"",
        regMbNumber:"",
        regEmNumber:"",
        regMbYzm:"",
        regPwd:"",
        isregPwd:true,

        sec:60,
        is_secRev:true,
        sec_timer:null,
        my_ticket:"",
        wxScTimer:null,
        is_overdue:false,

        userSet:{},
        // 图形验证码
        imgVerCode:"",
        imgVerCode_img:{},
        myCode:"",
        is_show_imgQr:false,

        qqOpenLoginLink:"",
        wxOpenLoginLink:"",
        myHost:"",
        myWxTicket:"",
        isHas_myWxTicket:false,

        //找回密码
        findPwdMb:"",
        findPwdYzm:"",
        findPwdStr:"",
        is_findPwdStr:true,
        fingPwdType:"",
        myInvite_id:""
      }
    },
    components:{
      VerCode
    },

    watch:{
      is_show_Ac:{
        handler:function(newVal,oldVal){
          console.log("newVal:",newVal);
          this.eMailAddr="";
          this.mbNumber="";
          this.lgYzm="";
          this.lgPwd="";
          this.regMbNumber="";
          this.regEmNumber="";
          this.regMbYzm="";
          this.regPwd="";
          this.imgVerCode="";
          this.findPwdMb="";
          this.findPwdYzm="";
          this.findPwdStr="";
          this.fingPwdType="";
        },
        deep:true,
        immediate:true
      }
    },


    created() {
      let that=this;
      this.$bus.$on("op_AcpopEvent",val=>{

      		this.closeAcPop(val);
          if(!val){
              that.acSecTimer();
          }
      });

    },
    mounted() {
      let that=this;

      //微信开放平台扫码登录处理
      console.log("拿localtion:",window.location.host);
      that.myHost=window.location.host;
      console.log("拿search:",window.location.search);

      if(window.location.search.indexOf("id")!==-1){
        that.myInvite_id=window.location.search.split("?id=")[1];
        console.log("that.myInvite_id:",that.myInvite_id);
      }

      if(window.location.search.indexOf("ticket")!==-1){
        that.isHas_myWxTicket=true;
        that.myWxTicket=window.location.search.split("?ticket=")[1];
        console.log("that.myWxTicket:",that.myWxTicket);

        that.wxScTimer=setInterval(that.wxOpenPlatResFn,2500);


      }else{
        that.isHas_myWxTicket=false;
      }



      this.$bus.$on("tcAccountPopEvent",x=>{
        console.log("x:",x);
        that.is_show_Ac=x;
        if(that.is_show_Ac){

          if(that.userSet.user_need_third_login!=="0"){
            that.gzhScCodeFn();
          }
        }else{
          clearInterval(that.wxScTimer);
          that.wxScTimer=null;

        }
      });
      that.getLgStatus();
      that.getWxOpenPlat();
      that.getQqOpenPlat();
    },
    methods:{

      wxOpenPlatResFn(){
        let that=this;
        this.$request.post(
          "/passport/queryOpenPlatformAccount",
          {
            ticket:that.myWxTicket
          }
        )
        .then(res=>{
        	 console.log("微信开放平台扫码登录结果res：",res);
           if(res.data.code==200){
             let my_Info=res.data.data.userinfo.user;
             my_Info.is_loginEd=true;
             my_Info=JSON.stringify(my_Info);
             clearInterval(that.wxScTimer);
             that.wxScTimer=null;
             this.$bus.$emit("toastEvent",res.data.msg,()=>{
               this.$bus.$emit("op_AcpopEvent",false);
               window.localStorage.setItem("u_Token",res.data.data.userinfo.token.token);
               window.localStorage.setItem("u_Info",my_Info);

               this.$cookie.setToken(res.data.data.userinfo.token.token);


               this.$bus.$emit("refreshU_InfoEvent");
               res.data.data.userinfo.user.u_token=res.data.data.userinfo.token.token;
               res.data.data.userinfo.user.is_loginEd=true;
               this.$store.commit("updateU_Info",res.data.data.userinfo.user);

             });

           }

        })
        .catch(err=>{
        	console.log("微信开放平台扫码登录结果请求失败：",err);
        });

      },

      addSendMsgTimer(){
        let that=this;
        if(that.is_secRev){
          that.is_secRev=false;
          that.sec_timer=setInterval(()=>{
            if(that.sec<=0){
              that.acSecTimer();
            }else{
              that.sec--;
            }
          },1000);
        }

      },

      // 发送短信验证码
      sendMsgFn(val,str){
        let that=this;
        this.$request.post(
           "/sms/send",
           {
              mobile:str,
              event:val
           },
           {
              'Content-Type': 'application/x-www-form-urlencoded'
           }
         ).then((res)=>{
         console.log("发送验证码请求成功：",res);
         //that.is_Show_nickname=false;
         //that.getU_Info();
         if(res.data.code==200){
            that.addSendMsgTimer();
         }

        })
        .catch((err)=>{
         console.log("发送验证码请求失败：",err);
        });
      },

      // 发送邮箱验证码
      sendEmailMsg(val,str){
        let that=this;
        this.$request.post(
          "/ems/send",
          {
          	email:str,
            event:val
          }
        )
        .then(res=>{
        	 console.log("邮箱验证码请求成功：",res);
           if(res.data.code==200){
               that.addSendMsgTimer();
            }


        })
        .catch(err=>{
        	console.log("邮箱验证码请求失败：",err);
        });

      },


      // 获取图形验证码
      getImgVerCodeFn(){
        let that=this;
        this.$request.get(
            "/generic/captcha",
            {

            },
            {
              'Content-Type': 'multipart/form-data'
            }
          ).then((res)=>{
           	console.log("获取图形验证码请求成功：",res);
            that.imgVerCode_img=res.data.data;
           })
           .catch((err)=>{
           	console.log("获取图形验证码请求失败：",err);
           });

      },

      getQqOpenPlat(){
        let that=this;
        this.$request.post(
             "/passport/qq",
             {
                redirect:"http://xzw.jsqigua.cn/"
             },
             {
                'Content-Type': 'application/x-www-form-urlencoded'
             }
           ).then((res)=>{
           console.log("QQ开放平台请求成功：",res);
           if(res.data.code==200){
             that.qqOpenLoginLink=res.data.data.link;
           }
          })
          .catch((err)=>{
           console.log("QQ开放平台请求失败：",err);
          });

      },
      // 微信开放平台
      getWxOpenPlat(){
        let that=this;
        this.$request.post(
             "/passport/openPlatform",
             {
                redirect:"http://"+that.myHost,                invite:that.myInvite_id
             },
             {
                'Content-Type': 'application/x-www-form-urlencoded'
             }
           ).then((res)=>{
           console.log("微信开放平台请求成功：",res);
           if(res.data.code==200){
             that.wxOpenLoginLink=res.data.data.link;
           }
          })
          .catch((err)=>{
           console.log("开放平台请求失败：",err);
          });

      },
      getLgStatus(){
        let that=this;
        this.$request.get(
            "/generic/setting",
            {

            },
            {
              'Content-Type': 'multipart/form-data'
            }
          ).then((res)=>{
           	console.log("获取全局配置请求成功：",res);
            that.userSet=res.data.data.config;
            console.log("that.userSet.user_need_third_login：",that.userSet.user_need_third_login);

            if(that.userSet.user_need_third_login!=="0"){
              that.isQrLogin=true;
              //that.gzhScCodeFn();
            }else{
              that.isQrLogin=false;
            }
           })
           .catch((err)=>{
           	console.log("获取全局配置请求失败：",err);
           });

      },

      QrLoginFn(){
        let that=this;
        that.isQrLogin=!that.isQrLogin;

        console.log("that.isQrLogin:",that.isQrLogin);
        if(that.isQrLogin){
          that.gzhScCodeFn();
        }else{
          clearInterval(that.wxScTimer);
          that.wxScTimer=null;
        }
      },
      gzhScResFn(){
        let that=this;
        this.$request.post(
          "/passport/queryOfficialAccount",
          {
            ticket:that.my_ticket
          }
        )
        .then(res=>{
        	 console.log("公众号扫码登录结果res：",res);
           if(res.data.code==200){
             let my_Info=res.data.data.userinfo.user;
             my_Info.is_loginEd=true;
             my_Info=JSON.stringify(my_Info);
             clearInterval(that.wxScTimer);
             that.wxScTimer=null;
             this.$bus.$emit("toastEvent",res.data.msg,()=>{
               this.$bus.$emit("op_AcpopEvent",false);
               window.localStorage.setItem("u_Token",res.data.data.userinfo.token.token);
               window.localStorage.setItem("u_Info",my_Info);

               this.$cookie.setToken(res.data.data.userinfo.token.token);


               this.$bus.$emit("refreshU_InfoEvent");
               res.data.data.userinfo.user.u_token=res.data.data.userinfo.token.token;
               res.data.data.userinfo.user.is_loginEd=true;
               this.$store.commit("updateU_Info",res.data.data.userinfo.user);

             });
           }

        })
        .catch(err=>{
        	console.log("公众号扫码登录结果请求失败：",err);
        });

      },
      // 微信公众号扫码
      gzhScCodeFn(){
        let that=this;
        that.is_overdue=false;

        this.$request.post(
          "/passport/officialAccount",
            {
            	invite:that.myInvite_id
            }
        )
        .then(res=>{
          console.log("公众号扫码登录地址请求成功：",res);
          that.my_ticket=res.data.data.ticket;
          this.$refs.qrCodeDiv.innerHTML="";
          if(res.data.code==200){
            new QRCode(this.$refs.qrCodeDiv, {
                 	  text: res.data.data.url,
                 	  width: 165,
                 	  height: 165,
                 	  colorDark: "#333333", //二维码颜色
                 	  colorLight: "#ffffff", //二维码背景色
                 	  correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
            });

               that.wxScTimer=setInterval(that.gzhScResFn,2500);
               setTimeout(()=>{
                 that.is_overdue=true;
                 clearInterval(that.wxScTimer);
                 that.wxScTimer=null;
               },1000*60*4);

          }

        })
        .catch(err=>{
          console.log("公众号扫码登录地址请求失败：",err);
        })


      },
      
      // 注册
      registerFn(){
        console.log("registerFn");
        console.log("isAcReg：",this.isAcReg);
        let that=this;
        if(this.isAcReg){

          this.$request.post(
            "/passport/mobileRegister",
            {
            	mobile:that.regMbNumber,
              password:that.regPwd,
              code:that.regMbYzm,
              captcha:that.imgVerCode,
              captcha_id:that.imgVerCode_img.id,
              invite:that.myInvite_id
            }
          )
          .then(res=>{
          	 console.log("手机号注册请求成功：",res);
             if(res.data.code==200){
                    // let my_Info=res.data.data.userinfo.user;
                    // my_Info.is_loginEd=true;
                    // my_Info=JSON.stringify(my_Info);


                    this.$bus.$emit(
                    "toastEvent",
                    res.data.msg,
                    ()=>{
                      // this.$bus.$emit("op_AcpopEvent",false);
                      // window.localStorage.setItem("u_Token",res.data.data.userinfo.token.token);
                      // window.localStorage.setItem("u_Info",my_Info);
                      // this.$store.commit("updateU_Info",res.data.data.userinfo.user);
                      that.showBoxFn(true,false,false);
                    }

                    );
              }

          })
          .catch(err=>{
          	console.log("手机号注册请求失败：",err);
          });

        }else{
          this.$request.post(
            "/passport/emailRegister",
            {
            	email:that.regEmNumber,
              password:that.regPwd,
              code:that.regMbYzm,
              captcha:that.imgVerCode,
              captcha_id:that.imgVerCode_img.id,              invite:that.myInvite_id
            }
          )
          .then(res=>{
          	 console.log("邮箱注册请求成功：",res);
             if(res.data.code==200){
                    let my_Info=res.data.data.userinfo.user;
                    my_Info.is_loginEd=true;
                    my_Info=JSON.stringify(my_Info);


                    this.$bus.$emit("toastEvent",res.data.msg,()=>{
                      // this.$bus.$emit("op_AcpopEvent",false);
                      // window.localStorage.setItem("u_Token",res.data.data.userinfo.token.token);
                      // window.localStorage.setItem("u_Info",my_Info);
                      // this.$bus.$emit("refreshU_InfoEvent");

                      //this.$store.commit("updateU_Info",res.data.data.userinfo.user);

                       that.showBoxFn(true,false,false);
                    });
                  }

          })
          .catch(err=>{
          	console.log("邮箱注册请求失败：",err);
          });

        }

      },

      findPwdReqFn(){
        let that=this;
        this.$request.post(
            "/passport/resetPassword",
            {
            	account:that.findPwdMb,
              code:that.findPwdYzm,
              password:that.findPwdStr
            }
          )
          .then(res=>{
          	 console.log("找回密码请求成功：",res);
               if(res.data.code==200){

                  this.$bus.$emit(
                        "toastEvent",
                        res.data.msg,
                        ()=>{
                          // this.$bus.$emit("op_AcpopEvent",false);
                          // window.localStorage.setItem("u_Token",res.data.data.userinfo.token.token);
                          // window.localStorage.setItem("u_Info",my_Info);
                          // this.$store.commit("updateU_Info",res.data.data.userinfo.user);
                            that.showBoxFn(true,false,false);
                          }
                        );


               }
          })
          .catch(err=>{
          	console.log("找回密码请求失败：",err);
          });

      },

      findPwdBtnFn(){
        let that=this;
        console.log("that.findPwdMb:",that.findPwdMb);
        if(that.findPwdMb.length!==0){
          if(that.findPwdMb.indexOf("@")!==-1){
            that.fingPwdType="reset_email";
          }else{
            that.fingPwdType="reset_mobile";
          }

          that.findPwdReqFn();
        }else{
          this.$bus.$emit("toastEvent","请输入手机号或者邮箱地址!");
        }

          console.log("fingPwdType:",that.fingPwdType);
      },
      mb_LoginFn(){
        let that=this;
        console.log("that.isAcLogin:",that.isAcLogin);
        console.log("mbNumber:",that.mbNumber);
        if(that.isAcLogin){

          this.$request.post(
            "/passport/mobileLogin",
            {
            	account:that.mbNumber,
              password:that.lgPwd
            }
          )
          .then(res=>{
          	 console.log("手机号登录请求成功：",res);
               if(res.data.code==200){
                let my_Info=res.data.data.user;
                    my_Info.is_loginEd=true;
                    my_Info=JSON.stringify(my_Info);

                  this.$bus.$emit("toastEvent",res.data.msg,()=>{
                    this.$bus.$emit("op_AcpopEvent",false);
                    console.log("手机号登录：",res.data.data.token.token);
                  window.localStorage.setItem("u_Token",res.data.data.token.token);

                  this.$cookie.setToken(res.data.data.token.token);

                  res.data.data.user.is_loginEd=true;
                  window.localStorage.setItem("u_Info",my_Info);
                    this.$bus.$emit("refreshU_InfoEvent");
                    this.$store.commit("updateU_Info",res.data.data.user);

                  });

               }
          })
          .catch(err=>{
          	console.log("手机号登录请求失败：",err);
          });
        }else{
            this.$request.post(
              "/passport/emailLogin",
              {
              	account:that.eMailAddr,
                password:that.lgPwd
              }
            )
            .then(res=>{
            	 console.log("邮箱登录请求成功：",res);
                 if(res.data.code==200){
                     let my_Info=res.data.data.user;
                     my_Info.is_loginEd=true;
                     my_Info=JSON.stringify(my_Info);

                   this.$bus.$emit("toastEvent",res.data.msg,()=>{
                     this.$bus.$emit("op_AcpopEvent",false);
                     console.log("邮箱登录：",res.data.data.token.token);
                   window.localStorage.setItem("u_Token",res.data.data.token.token);

                  this.$cookie.setToken(res.data.data.token.token);

                   res.data.data.user.is_loginEd=true;
                   window.localStorage.setItem("u_Info",my_Info);
                     this.$bus.$emit("refreshU_InfoEvent");
                     this.$store.commit("updateU_Info",res.data.data.user);

                   });
                 }
            })
            .catch(err=>{
            	console.log("邮箱登录请求失败：",err);
            });

        }

      },

      acSecTimer(){
        let that=this;
        that.sec=60;
        that.is_secRev=true;
        clearInterval(that.sec_timer);
        that.sec_timer=null;
      },


      secBtn(){
        let that=this;

        // if(that.is_secRev){
        //   that.is_secRev=false;
        //   that.sec_timer=setInterval(()=>{
        //     if(that.sec<=0){
        //       that.acSecTimer();
        //     }else{
        //       that.sec--;
        //     }
        //   },1000);
        // }
        if(that.isShowRegister){
          if(that.is_secRev){
            if(that.isAcReg){
              console.log("手机号注册");
              that.sendMsgFn("register",that.regMbNumber);
            }else{
              console.log("邮箱注册");
              that.sendEmailMsg("register",that.regEmNumber);
            }
          }

        }else if(that.isShowFindPwd){
          if(that.is_secRev){
            console.log("that.isShowFindPwd:",that.isShowFindPwd);
            if(that.findPwdMb.length!==0){
              if(that.findPwdMb.indexOf("@")!==-1){
                console.log("邮箱找回密码");
                that.fingPwdType="reset_password";
                that.sendEmailMsg(that.fingPwdType,that.findPwdMb);
              }else{
                console.log("手机号找回密码");
                that.fingPwdType="reset_password";
                that.sendMsgFn(that.fingPwdType,that.findPwdMb);
              }

            }else{
              this.$bus.$emit("toastEvent","请输入正确的手机号或者邮箱地址!");
            }
          }
        }

      },

      seeLgPwd(){
        this.isLoginPwd=!this.isLoginPwd;
      },
      seeFindPwd(){
        this.is_findPwdStr=!this.is_findPwdStr;
      },
      seeRegPwd(){
        this.isregPwd=!this.isregPwd;
      },
      clearVal(val){
        this[val]="";
        console.log('val:',val)
      },

      //关闭登录弹窗
      closeAcPop(val){
        let that=this;
        that.is_show_Ac=val;
        if(!val){
          clearInterval(that.wxScTimer);
          that.wxScTimer=null;
          //that.isQrLogin=false;
        }

        // if(that.is_show_Ac){
        //     that.gzhScCodeFn();
        //   }else{
        //     clearInterval(that.wxScTimer);
        //     that.wxScTimer=null;

        //   }

      },

      titleBtnFn(val){
        let that=this;
        that.isAcLogin=val;
        that.lgPwd="";
        that.mbNumber="";
        that.eMailAddr="";

      },
      titleRegBtnFn(val){
        let that=this;
        that.isAcReg=val;
        that.regMbNumber="";
        that.regEmNumber="";
        that.regPwd="";
        that.regMbYzm="";
        that.imgVerCode="";
        that.acSecTimer();
        that.getImgVerCodeFn();

      },
      showBoxFn(x,y,z){
        let that=this;
        that.isShowLogin=x;
        that.isShowRegister=y;
        that.isShowFindPwd=z;
        that.acSecTimer();

        that.getImgVerCodeFn();
      }
    }
  }
</script>

<style lang="less" scoped="scoped">
  .titleBtn{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    span{
      cursor: pointer;
          font-size: 20px;
          color: #282828;
            line-height: 36px;
            display: block;

    }

    .ac_titleBtn{
      color: #2c8eff;
    }
  }
  .account{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 11;
    background: rgba(0,0,0,.3);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    .accountMainBg{
      width: 825px;
      height: 460px;
      background: #fff;
      border-radius: 8px;
      position: relative;
      >img{
        width:30px;
        cursor: pointer;
        position: absolute;
        top: -60px;
        right: -60px;
      }
      .accountMain{
        height: 100%;
        border-radius: 8px;
        overflow: hidden;
        display: flex;
        flex-direction: row;

        .Le{
          width: 355px;
          background-color: #2c8eff;
          img{
            display: block;
            width: 100%;
            height: 100%;
          }
        }

        .Ri{
          width: 470px;

          .acUl{
                  overflow: hidden;
                  li{
                    margin-top: 20px;
                    display: flex;
                    flex-direction: row;
                    .inpWrap{
                          height: 50px;
                          border-radius: 25px;
                          border: 1px solid #dbdbdb;
                          overflow: hidden;
                          display: flex;
                          flex-direction: row;
                          .textBtn{
                            font-size: 12px;
                                color: #999;
                                margin: 0 24px;
                                cursor: pointer;
                                line-height: 50px;
                          }

                          .textBtn_01{
                            width: 111px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            border-left: 1px solid #dbdbdb;
                            span{
                                font-size: 14px;
                                color: #2c8eff;
                                cursor: pointer;
                                line-height: 50px;
                            }
                          }
                      .inpWrapBox{
                          display: flex;
                          flex-direction: row;
                          .wid_00{
                            width: 290px;
                          }
                          .wid_01{
                            width: 194px;
                          }
                          .wid_02{
                            width: 180px;
                          }
                          .wid_03{
                            width: 180px;
                          }
                          input{
                            display: block;
                            border: none;
                            outline: none;
                            color: #000;
                            font-size: 14px;
                            line-height: 50px;
                            padding: 0 20px;
                            background: none;
                          }

                          input::placeholder{
                            color: #dbdbdb;
                          }

                          .btnClear{
                            width: 26px;
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                            img{
                              display: block;
                              width: 13px;
                              cursor: pointer;
                            }
                          }
                          .btnSee{
                            width: 26px;
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                            img{
                              display: block;
                              width: 16px;
                              cursor: pointer;
                            }
                          }
                      }

                    }
                    .xieyi{
                      display: flex;
                      flex-direction: row;
                      align-items: center;
                      height: 19px;
                      input{
                        display: block;
                        margin-right: 5px;
                        cursor: pointer;

                      }
                      label{
                        display: block;
                        font-size: 12px;
                        color: #666;
                        line-height: 20px;
                        cursor: pointer;
                      }
                      span{
                        display: block;
                        font-size: 12px;
                        color: #ff6b00;
                        line-height: 20px;
                        cursor: pointer;
                      }
                    }
                    .tjBtn_00{
                      display: block;
                      border: none;
                      outline: none;
                      cursor: pointer;
                          background: linear-gradient(90deg, #409dff 0%, #1e85fb 100%);
                          color: #fff;
                            border-radius: 25px;
                            font-size: 13px;
                            width: 100%;
                            height: 50px;
                    }

                    .btnDl{
                      display: flex;
                      flex-direction: row;
                      justify-content: center;
                      width: 100%;
                      dt,dd{
                          font-size: 14px;
                          line-height: 20px;
                      }
                      dt{
                        color: #ccc;
                      }
                      dd{
                        color: #2c8eff;
                        cursor: pointer;
                      }
                    }
                  }
                }

          .logoBox{
            height: 100%;
            position: relative;
            .qrtu{
              width: 68px;
              height: 68px;
              overflow: hidden;
              position: absolute;
              top: 0;
              right: 0;
              cursor: pointer;
              img{
                display: block;
                width: 100%;
                height: 100%;
              }
            }

            .QrLoginBg{
              height: 100%;
              padding: 0 125px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              h3{
                font-size: 20px;
                    line-height: 26px;
                    color: #282828;
                    font-weight: normal;
              }

              .QrCodeBg{
                width: 209px;
                height: 209px;
                margin: 36px auto 0;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                position: relative;
                .overdueBg{
                  position: absolute;
                  top: 0;
                  right: 0;
                  bottom: 0;
                  left: 0;
                  margin: auto;
                  width: 209px;
                  height: 209px;
                  background: rgba(0,0,0,.7);
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  align-items: center;
                  h3{
                    color: #fff;
                    font-size: 18px;
                    text-align: center;
                    line-height: 24px;
                    font-weight: bolder;
                  }
                  .tu{
                    display: flex;
                    flex-direction: row;
                    justify-content: center;
                    align-items: center;
                    margin-top: 10px;
                    cursor: pointer;
                    img{
                      display: block;
                      width: 14px;
                      height: 14px;
                      font-weight: bolder;
                      margin-left: 6px;
                    }
                    span{
                      display: block;
                      color: #fff;
                      font-size: 14px;
                      line-height: 20px;
                    }
                  }
                }
              }

              h6{
                    margin-top: 20px;
                    font-size: 14px;
                    line-height: 19px;
                    text-align: center;
                    color: #666666;
                    font-weight: normal;
              }

              .tzLoginBox{
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                margin-top: 10px;
                dt{
                  position: relative;
                  display: flex;
                  flex-direction: row;
                  justify-content: center;
                  padding: 0 80px;
                  h3{
                    background: #fff;
                    color: #666;
                    font-size: 15px;
                    line-height: 32px;
                    height: 32px;
                    width: 130px;
                      text-align: center;
                      padding: 0 15px;
                      position: relative;
                      z-index: 2;
                  }
                }

                dt:after{
                  content: "";
                  position: absolute;
                  top: 16px;
                  left: 0;
                  width: 100%;
                  height: 1px;
                  background: #efefef;
                }
                dd{
                  display: flex;
                  flex-direction: row;
                  justify-content: center;
                  margin-top:5px;
                  align-items: center;
                  .qqLogin{
                    height: 30px;
                    a{
                      display: block;
                      height: 30px;
                      img{
                        height: 100%;
                        display: block;
                      }
                    }
                  }
                  div{
                    margin: 0 20px;
                      color: #2c8eff;
                      font-size: 14px;
                      line-height: 24px;
                      cursor: pointer;
                    a{
                      display: block;
                      color: #2c8eff;
                      font-size: 14px;
                      line-height: 24px;
                      cursor: pointer;
                    }
                  }
                }
              }
            }

            .LoginBg{
              height: 100%;
              padding: 0 56px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              .LoginBoxBg{


              }
            }
          }
          .registerBox{
            height: 100%;
            padding: 0 56px;
                display: flex;
                flex-direction: column;
                justify-content: center;
          }
          .findPwdBox{
            height: 100%;
            padding: 0 56px;
                display: flex;
                flex-direction: column;
                justify-content: center;
          }
        }
      }
    }
  }

  .loginTitle{
      font-size: 20px;
          color: #282828;
          line-height: 40px;
          text-align: center;
          font-weight: normal;
    }


.verCodeDL{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  dt{
    input{
          display: block;
          border: none;
          outline: none;
          color: #000;
          font-size: 14px;
          line-height: 42px;
          height: 42px;
          padding: 0 20px;
          width: 170px;
          background: none;
              border-radius: 25px;
              border: 1px solid #dbdbdb;
    }

    input::placeholder{
      color: #dbdbdb;
    }

  }
}


.imgVerCodeBox{
  width: 130px;
  height: 40px;
  img{
    width: 130px;
    height: 40px;
    display: block;
    cursor: pointer;
  }
}

@media screen and (max-width:767px){
  .account{
    .accountMainBg{
      width: 340px;
      >img{
        left: 0;
        right: 0;
        margin: auto;
      }
      .accountMain{
        .Le{
          display: none;
        }

        .Ri{
          width: 100%;
          .logoBox{
            .QrLoginBg{
              padding: 0 5px;
            }
            .LoginBg{
              padding: 0 10px;
              .LoginBoxBg{
                .acUl{
                  >li{
                    .inpWrap{
                      .inpWrapBox{
                        .wid_01{
                          width: 156px;
                        }
                      }
                    }
                  }
                }
              }
            }
          }

          .registerBox{
            padding: 0 10px;
            .wid_02{
              width: 140px !important;

            }
            .verCodeDL{
              dt{
                input{
                  width: 130px !important;
                }
              }
            }
          }

          .findPwdBox{
            padding: 0 10px;
            .wid_02{
              width: 156px !important;
            }
          }
        }
      }

    }
  }
}

</style>
